<script setup lang="ts">
  import { h } from 'vue';
  import { PlusOutlined } from '@vicons/antd';
  import ProTable from '@/components/ProTable';

  const columns1 = [
    {
      key: 'name',
      valueType: 'text',
      label: '姓名',
      tooltip: '这是一个提示',
      fieldProps: {
        placeholder: '请输入姓名',
      },
      defaultValue: '明远',
      rules: [{ required: true, message: '请输入姓名', trigger: ['blur'] }],
    },
    {
      key: 'name2',
      valueType: 'select',
      label: '姓名',
      tooltip: '这是一个提示',
      fieldProps: {
        placeholder: '请输入姓名',
        options: [
          {
            label: '舒适性',
            value: 1,
          },
          {
            label: '经济性',
            value: 2,
          },
        ],
      },
      // rules: [{ required: true, message: '请输入姓名', trigger: ['blur'] }],
    },
    {
      key: 'name3',
      valueType: 'text',
      label: '姓名',
      tooltip: '这是一个提示',
      fieldProps: {
        placeholder: '请输入姓名',
      },
      // rules: [{ required: true, message: '请输入姓名', trigger: ['blur'] }],
    },
    {
      key: 'name4',
      valueType: 'select',
      label: '姓名',
      tooltip: '这是一个提示',
      fieldProps: {
        placeholder: '请输入姓名',
      },
      // rules: [{ required: true, message: '请输入姓名', trigger: ['blur'] }],
    },
    {
      key: 'status',
      label: '状态',
      slot: 'statusSlot',
    },
  ];

  const columns = [
    {
      title: 'id',
      key: 'id',
      width: 100,
      render: () =>
        h(
          'div',
          {
            style: { color: 'red' },
          },
          '12'
        ),
    },
    {
      title: '名称',
      key: 'name',
      width: 100,
    },
  ];

  const loadList = async (res: any) => {
    console.log(res, '123');
    // const result = await getTableList({ ...formParams, ...params.value, ...res });
    return {
      data: [{}, {}],
      total: 20,
    };
  };

  const reloadTable = () => {};
</script>
<template>
  <n-card :bordered="false" class="proCard">
    <ProTable
      :columns="columns"
      :request="loadList"
      :form="{
        columns: columns1,
        formProps: {
          labelWidth: 120,
        },
      }"
    >
      <template #tableTitle>
        <n-button type="primary">
          <template #icon>
            <n-icon>
              <PlusOutlined />
            </n-icon>
          </template>
          新建
        </n-button>
      </template>

      <template #toolbar>
        <n-button type="primary" @click="reloadTable">刷新数据</n-button>
      </template>
    </ProTable>
  </n-card>
</template>

<style scoped lang="less"></style>
